<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>MacPro 视频滚动效果</title>
  <script src="./lib/TweenLite.min.js"></script>
  <style>
    body {
      margin: 0;
      background: #000;
      height: 1500vh;
    }

    #myVideo {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .btn {
      position: fixed;
      z-index: 2;
      top: 0;
      bottom: 0;
      width: 20%;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      outline: none;
      color: #fff;
      transition: all .1s;
      cursor: pointer;
    }

    .btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .btn:active {
      background: rgba(255, 255, 255, 0.3);
    }

    #prev {
      left: 0;
    }

    #next {
      right: 0;
    }
  </style>
</head>

<body>
<!-- https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4 -->
<video id="myVideo" src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4"></video>
<button id="prev" class="btn"><<</button>
<button id="next" class="btn">>></button>

<script>
  window.onload = function () {
    var video = document.getElementById('myVideo')
    var duration = 0
    var pageHeight = document.body.scrollHeight - window.innerHeight
    var currentTime = 0

    video.addEventListener('loadedmetadata', function (e) {
      duration = e.target.duration
      console.log('视频元数据已加载', duration)

      document.addEventListener('scroll', handleScrollSimple)

      document.getElementById('prev').addEventListener('click', function () {

        if (currentTime > 0) {

          currentTime -= 0.5
          TweenLite.to(video, 2, {currentTime: currentTime, ease: Linear.easeInOut})

          console.log('退至', currentTime)
        } else {
          console.log('到头了')
        }


      })
      document.getElementById('next').addEventListener('click', function () {

        if (currentTime < duration) {

          currentTime += 0.5
          TweenLite.to(video, 2, {currentTime: currentTime, ease: Linear.easeInOut})
          console.log('进至', currentTime)
        } else {
          console.log('到尾了')
        }

      })
    })

    function handleScroll() {
      var y = window.pageYOffset
      currentTime = y / 100
      var playTo = currentTime
      duration = Math.sqrt(Math.abs(video.currentTime - currentTime)) / 4
      TweenLite.to(video, duration, {currentTime: currentTime, ease: Linear.easeInOut})
    }

    function handleScrollSimple(e) {
      var y = window.pageYOffset

      var percent = (y / pageHeight)

      video.currentTime = duration * percent
      // console.log(y, percent.toFixed(2) + '%')
    }
  }
</script>
</body>

</html>
